<template>
  <div class="checkMaintainDetail zy-content">
    <div class="title">
      <span>查看精度任务</span>
      <div class="back" @click="back">返回上一级</div>
    </div>
    <div class="titleItem">
      <span>检测对象</span>
      <div class="checkObject">
        <div class="checkObjectItem">
          <div class="checkObjectName">计划名称</div>
          <div class="checkObjectValue">
            <Tooltip max-width="200">
              <div class="over-wrapper">{{ detail.planName }}</div>
              <div slot="content">
                <p>{{ detail.planName }}</p>
              </div>
            </Tooltip>
<!--            {{ detail.planName }}-->
          </div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName" >{{$t('maintenance.EquipmentType')}}</div>
          <div class="checkObjectValue">{{ detail.categoryName }}</div>
        </div>
<!--        <div class="checkObjectItem">-->
<!--          <div class="checkObjectName">{{$t('maintenance.EquipmentName')}}</div>-->
<!--          <div class="checkObjectValue">{{ detail.deviceName }}</div>-->
<!--        </div>-->
<!--        <div class="checkObjectItem">-->
<!--          <div class="checkObjectName">{{$t('maintenance.EquipmentNo')}}</div>-->
<!--          <div class="checkObjectValue">{{ detail.deviceMId }}</div>-->
<!--        </div>-->
<!--        <div class="checkObjectItem">-->
<!--          <div class="checkObjectName">{{$t('ledger.EquipmentType')}}</div>-->
<!--          <div class="checkObjectValue">{{ detail.specification }}</div>-->
<!--        </div>-->
      </div>
    </div>
    <div class="contentTable">
      <Table ref="selection" :columns="checkColumns" :data="detail.dcmAcctestDetail">
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" @click="seeDetail(row)"><Icon type="md-eye" size='18' />{{$t('common.CheckDetial')}}</span>
        </template>
      </Table>
    </div>
    <div class="titleItem">
      <span>检测时间</span>
      <div class="checkObject">
        <div class="checkObjectItem">
          <div class="checkObjectName">任务生成时间</div>
          <div class="checkObjectValue">{{ detail.createTime }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">任务分配时间</div>
          <div class="checkObjectValue">{{ detail.distriTime }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">检测人</div>
          <div class="checkObjectValue">{{ detail.operater }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">检测开始时间</div>
          <div class="checkObjectValue">{{ detail.taskBeginTime }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">检测完成时间</div>
          <div class="checkObjectValue">{{ detail.operateTime }}</div>
        </div>

<!--        <div class="checkObjectItem">-->
<!--          <div class="checkObjectName">检测确认时间</div>-->
<!--          <div class="checkObjectValue">{{ detail.reviewTime }}</div>-->
<!--        </div>-->
<!--        <div class="checkObjectItem">-->
<!--          <div class="checkObjectName">检测确认人</div>-->
<!--          <div class="checkObjectValue">{{ detail.reviewer }}</div>-->
<!--        </div>-->
      </div>
    </div>
    <div class="titleItem">
      <span>检测内容</span>
    </div>
    <div class="contentTable">
      <Table ref="selection" :columns="contentColumns" :data="detail.dcmAcctestProject">
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" @click="seeDetail(row)"><Icon type="md-eye" size='18' />{{$t('common.CheckDetial')}}</span>
        </template>
      </Table>
    </div>
    <div class="titleItem" v-if="!detail.fileNameG">
      <span>A客户精度检测结果</span>
      <div class="checkObject">
        <div class="checkObjectItem">
          <div class="checkObjectName">检测精度</div>
          <div class="checkObjectValue">
            <Row>
              <Col span="16">
                <RadioGroup v-model="checkedA">
                  <Radio label="1" disabled>已检测</Radio>
                  <Radio label="0" disabled>未检测</Radio>
                </RadioGroup>
              </Col>
              <Col span="8" style="color: #187bdb;cursor: pointer;">
                <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 40px" @click="handlePreview(detail.fileUrlA)">{{ detail.fileNameA }}</div>
              </Col>
            </Row>
          </div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">检测时间</div>
          <div class="checkObjectValue">{{ detail.createTimeA }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">检测人</div>
          <div class="checkObjectValue">{{ detail.operater }}</div>
        </div>
      </div>
    </div>
    <div class="titleItem" v-if="!detail.fileNameA">
      <span>G客户精度检测结果</span>
      <div class="checkObject">
        <div class="checkObjectItem">
          <div class="checkObjectName">检测精度</div>
          <div class="checkObjectValue">
            <Row>
              <Col span="16">
                <RadioGroup v-model="checkedB">
                  <Radio label="1" disabled>已检测</Radio>
                  <Radio label="0" disabled>未检测</Radio>
                </RadioGroup>
              </Col>
              <Col span="8" style="color: #187bdb;cursor: pointer">
                <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 40px" @click="handlePreview(detail.fileUrlG)">{{ detail.fileNameG }}</div>
              </Col>
            </Row>
          </div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">检测时间</div>
          <div class="checkObjectValue">{{ detail.createTimeG }}</div>
        </div>
        <div class="checkObjectItem">
          <div class="checkObjectName">检测人</div>
          <div class="checkObjectValue">{{ detail.operater }}</div>
        </div>
      </div>
    </div>
    <Modal :mask-closable="false"
            v-model="visible"
            title="检测内容详情"
            class="checkContentModal"
            width='1200'
            footer-hide
    >
      <contentDetail :planMaterialList="materialList" :planToolList="toolList"></contentDetail>
    </Modal>
  </div>
</template>

<script>
  import contentDetail from '../../accuracyPlan/modal/contentDetail'
  export default {
    name: "checkDetail",
    components: {
      contentDetail
    },
    props: ['detail'],
    data() {
      return {
        checkedA: '',
        checkedB: '',
        total: 64,
        pageSize: 10,
        pageNum: 1,
        visible: false,
        pageSizeOption: [10, 20, 30, 40],
        checkColumns: [
          { title: `${ this.$t('common.Belongsfactory') }`, key: "belongCompanyName" },
          { title: `${ this.$t('maintenance.EquipmentNo') }`, key: "deviceMId" },
          {  title: `${ this.$t('common.machineno') }`, key: "deviceNo" },
          { title: `${ this.$t('maintenance.EquipmentName') }`, key: "deviceName" },
          { title: `${ this.$t('ledger.EquipmentType') }`, key: "specification" },
          { title: "检测精度", key: "accuracy" },
          { title: `${ this.$t('fault.FunctionalLocation') }`, key: "orgName" },
          { title: `${ this.$t('common.Productioncode') }`, key: "productionCode" },
          { title: `${ this.$t('common.ProductionDescription') }`, key: "productionLine" },
        ],
        contentColumns: [
          { title: `${ this.$t('common.testitems') }`, key: 'itemProject'},
          {title: `${ this.$t('common.testmethod') }`, key: 'itemMethod'},
          { title: `${ this.$t('maintenance.Unit') }`, key: 'unitName'},
          {title: `${ this.$t('maintenance.UpperLimit') }`, key: 'max_value'},
          { title: `${ this.$t('maintenance.LowerLimit') }`, key: 'min_value'},
          { title: `${ this.$t('maintenance.workinghours') }`, key: 'itemHours'},
          // {title: '检测结果', key: 'resultStatus'},
          // {title: '检测结果记录', key: 'resultValue'},
          {title: `${ this.$t('common.operation') }`, slot: 'action', width: 150, align: 'center'},
        ],
        data: [],
        materialList: [],
        toolList: []
      }
    },
    watch: {
      detail(newValue) {
        console.log(newValue)
        this.checkedA = newValue.fileNameA ? '1' : ''
        this.checkedB = newValue.fileNameB ? '1' : ''
      }
    },
    methods: {
      back() {
        this.$emit('changeDetailVisible', false)
      },
      handlePreview(url) {
        console.log(123)
        if (url) {
          window.open(url)
        }


      },
      changePageNum() {},
      changePageSize() {},
      seeDetail(row) {
        this.visible = true;
        this.getWlDetail(row.itemId)
      },
      getWlDetail(itemId) {
        this.axios({
          method: 'get',
          url: '/dms/dcmAcctestTask/queryByItemId',
          params: {
            itemId
          }
        }).then(res => {
          
          if(res.code === 200){
            this.materialList = res.data.materialList
            this.toolList = res.data.toolList
          }else{
            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
          }
        })
      },
    }
  }
</script>
<style lang="scss">
  .checkMaintainDetail {
    background: #fff;
    .title {
      display: flex;
      justify-content: flex-start;
      font-size: 20px;
      padding: 10px;
      border-bottom: 1px solid #dddddd;
      align-items: center;
      .back {
        color: #187BDB;
        font-size: 16px;
        padding-left: 20px;
        cursor: pointer;
      }
    }
    .titleItem {
      position: relative;
      font-size: 18px;
      font-weight: bold;
      padding: 10px;
      .checkObject {
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        /*border-bottom: 2px solid #D7D7D7;*/
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
        .checkObjectItem {
          display: flex;
          flex: 0 33%;
          .checkObjectName {
            height: 40px;
            line-height: 40px;
            width: 30%;
            border: 1px solid #EEEEEE;
            background: #F5F6F7;
            text-align: right;
            padding-right: 10px;
            color: #666666;
          }
          .checkObjectValue {
            height: 40px;
            line-height: 40px;
            width: 70%;
            border: 1px solid #EEEEEE;
            padding-left: 10px;
            color: #333;
          }
        }
      }
      .checkTool {
        display: flex;
        padding: 20px;
        .checkToolItem {
          flex: 1;
          .checkObjectName {
            height: 40px;
            line-height: 40px;
            border: 1px solid #eeeeee;
            background: #f5f6f7;
            text-align: center;
          }
          .checkObjectValue {
            height: 40px;
            line-height: 40px;
            border: 1px solid #eeeeee;
            text-align: center;
          }
        }
      }
      .searchBox {
        .label {
          display: flex;
        }
      }
      .contentTable {
        padding: 20px;
      }
    }
    .titleItem::before{
      content: '';
      position: absolute;
      width: 3px;
      height: 20px;
      top: 12px;
      left: 0px;
      background: #187BDB;
    }
  }
  .over-wrapper {
    width: 200px;
    /*height: 23px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
